<!--
 * @Description: 发现-今天随机推荐歌曲
 * @Author: 56208
 * @Date: 2025/4/19 17:38
 * @LastEditors: 56208
 * @LastEditTime: 2025/4/19 17:38
 * @FilePath: D:/vue3-electron-music/src/renderer/src/view/recommend/components\songRecommend.vue
 -->

<template>
  <div class="d-flex flex-d-col">
    <div class="h-160 w-300 container p-12 d-al rounded-8" :style="{ background: gradient }">
      <img
        ref="imageRef"
        :src="imageUrl"
        height="120"
        width="120"
        class="rounded-8 bg-white"
        alt=""
        @load="handleImageLoad"
      />
      <div class="d-flex flex-d-col ml-20 h-100 w-200 jt-sb">
        <div class="text-ellipsis">{{ songName }}</div>
        <div class="text-ellipsis">{{ artistName }}</div>
        <div class="d-flex">
          <img src="@renderer/assets/icon/play3.svg" class="c-pointer" alt="" />
          <img src="@renderer/assets/icon/stop2.svg" class="c-pointer" alt="" />
          <img src="@renderer/assets/icon/likeBtn.svg" class="ml-8 c-pointer" alt="" />
        </div>
      </div>
    </div>
    <div class="mt-8 text-18 text-ellipsis">猜你喜欢</div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import ColorThief from 'colorthief'

const songName = ref('21321321')
const artistName = ref('421421142')
const imageUrl = new URL('./touxiang.svg', import.meta.url).href
const imageRef = ref('')
const gradient = ref('')
const handleImageLoad = () => {
  if (imageRef.value && imageRef.value.complete && imageRef.value.naturalWidth > 0) {
    const colorThief = new ColorThief()
    const dominantColor = colorThief.getColor(imageRef.value)
    const [r, g, b] = dominantColor
    // 动态随机渐变
    const randomAngle = Math.floor(Math.random() * 360)
    const randomOffset = Math.floor(Math.random() * 50)
    gradient.value = `linear-gradient(${randomAngle}deg, rgba(${r}, ${g}, ${b}, 0.8), rgba(${r + randomOffset}, ${g + randomOffset}, ${b + randomOffset}, 0.5))`
  } else {
    console.log('图片未正确加载')
  }
}
onMounted(() => {
  if (imageRef.value && imageRef.value.complete) {
    handleImageLoad()
  }
})
</script>

<style scoped lang="less">
.container {
  border-radius: 8px;
}
</style>
